<template>
    <div class="fullScreen bg-c-wh">
        <!-- header、倒计时、玩法提示等 -->
        <lot-header></lot-header>
        <div class="scroll-lot tx-s-14" v-if="lotData != null">
            <!-- 两面盘 -->
            <div v-show="lotIndex == 0">
                <div class="title-lot">两面</div>
                <lhc-options :title="['', '']" :content="pclmpCont" :odds="lotOdds" :temp="4"></lhc-options>
                <div class="title-lot">波色/豹子</div>
                <lhc-options :title="['', '']" :content="bsbzCont" :odds="lotOdds" :temp="4"></lhc-options>
            </div>
            <!-- 特码 -->
            <div v-show="lotIndex == 1">
                <div class="title-lot">总和</div>
                <lhc-options :title="['zonghe', '']" :content="c0d27Cont" :odds="lotOdds.ds" :temp="6"></lhc-options>
                <div class="title-lot">特码包三</div>
                <div class="opt-pad">
                    <div class="tx-l tx-c-666">
                        特码包三<span class="tx-c-r">{{lotOdds.tmbs}}</span>
                    </div>
                    <div class="flex-box flex-ac mar-t-5 pad-lr">
                        <div class="flex-box flex-f1 bor-a" @click="tmbsNum('0')">
                            <div class="bg-c-wh padd-05 wid-80">{{ tmbs[0] }}</div>
                            <div class="flex-box flex-pc bg-c-g">
                                <div class="btn-d"></div>
                            </div>
                        </div>
                        <div class="marg-05 tx-s-22">+</div>
                        <div class="flex-box flex-f1 bor-a" @click="tmbsNum('1')">
                            <div class="bg-c-wh padd-05 wid-80">{{ tmbs[1] }}</div>
                            <div class="flex-box flex-pc bg-c-g">
                                <div class="btn-d"></div>
                            </div>
                        </div>
                        <div class="marg-05 tx-s-22">+</div>
                        <div class="flex-box flex-f1 bor-a" @click="tmbsNum('2')">
                            <div class="bg-c-wh padd-05 wid-80">{{ tmbs[2] }}</div>
                            <div class="flex-box flex-pc bg-c-g">
                                <div class="btn-d"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- footer -->
        <div class="flex-box flex-pj lotteryFooter tx-s-14">
            <div class="tx-c-r bor-r-g footer-btn" @click="cancel">重置</div>
            <div class="flex-box flex-f1">
                <input v-model="money" class="input-ol-n wd-fh tx-c" type="number" placeholder="请输入单注金额" />
            </div>
            <div class="tx-c-g bor-l-g footer-btn" @click="confirm">确定</div>
        </div>
        <div v-if="tmbsSel" class="maskLayer flex-bap tx-c" @click="tmbsNum('')">
            <div class="optionBox bg-c-wh lineh-225">
                <div class="tx-c-wh bg-red">选择一个和数</div>
                <div class="flex-box flex-wp pad-box bor-b-g tx-s-14">
                    <div class="flex-bap wd-14" v-for="i in c0d27Cont" :key="i[0]" @click="selNum(i[0])">
                        <div class="flex-bap option-bor" :class="{
                            'bg-c-sel' : i[0] == tmbs[theSel]
                        }">{{ i[0] }}</div>
                    </div>
                </div>
                <div class="tx-c-666">取消</div>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
import 'common/css/lottery.css'
import { mapGetters } from 'vuex'
import { isDefine, isEmptyObject, openLotOrder } from '../../../common/js/common'
import Trans from '../../../common/js/eventTrans'
import LotHeader from "../../../components/lottery/lot-header"
import LhcContTab from "../../../components/lottery/lhcContTab"
import LhcOptions from "../../../components/lottery/lhcOptions"
import { pclmpCont, bsbzCont, numCont } from '../../../common/js/data'
export default {
    data () {
        return {
            allResult : [],
            money : '',
            pclmpCont : pclmpCont, // 两面盘内容
            bsbzCont : bsbzCont, // 波色内容
            c0d27Cont : numCont(0, 27, 'number'),
            tmbs : [0, 0, 0],
            theSel : '',
            tmbsSel : false
        }
    },
    mounted () {
        var _this = this
        Trans.$on('togLotteryTab', function (msg) {
            _this.cancel()
        })
    },
    methods: {
        tmbsNum (id) {
            if(id) this.theSel = id
            this.tmbsSel = !this.tmbsSel
        },
        selNum (i) {
            this.tmbs[this.theSel] = i
        },
        // 重置下注数据
        cancel () { 
            this.money = ''
            this.$store.state.lotOptTra = []
            this.$store.state.lotOptions = []
            this.$store.state.lotSelData = []
        },
        // 确定
        confirm () {
            const {lotStatus, lotSelData, lhcTra, lotTitle, lhcPlay} = this.$store.state
            if(lotStatus == 0){
                this.$alert('已封盘')
            }else if(lotStatus == -1){
                this.$alert('已关盘')
            }else if(lotStatus == 1){
                if(this.lotIndex == 1){ // 特码玩法
                    if(isEmptyObject(lotSelData) && this.theSel == ''){
                        this.$toast('未下注', 2000)
                    }else{
                        if(this.theSel){ // 特码包三选择号码
                            if((new Set(this.tmbs)).size != this.tmbs.length){ // 号码重复
                                this.$toast('特码包三所选号码不能相同', 2000)
                                return
                            }else{ // 号码不重复向lotSelData添加包三数据
                                const opt = this.tmbs[0] +','+ this.tmbs[1] +','+ this.tmbs[2]
                                let selObj = {
                                    'odds' : this.lotOdds.tmbs,
                                    'playType' : 'baosan',
                                    'content' : opt,
                                    'name' : opt
                                }
                                lotSelData.push(selObj)
                            }
                        }
                        openLotOrder(this.money)
                    }
                }else{ // 两面盘玩法
                    if(isEmptyObject(lotSelData)){
                        this.$toast('未下注', 2000)
                    }else{
                        openLotOrder(this.money)
                    }
                }
            }
        },
        // 打开玩法提示
        showDesc () {
            this.$store.state.lotDesc = true
        },
        sxCont () {
            return sxCont(1, '')
        }
    },
    components: {
        LotHeader,
        LhcContTab,
        LhcOptions
    },
    computed: {
        ...mapGetters([
            'lotData',
            'lotOdds',
            'lotIndex'
        ])
    }
};
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
.tx-l
    text-align : left
    margin-left : .5rem
.pad-lr
    padding : 0 .5rem
.wid-80
    width : 80%
.btn-d
    background-image : url('../../../common/image/btn_down.png')
    width : .75rem
    height : .5rem
    background-repeat : no-repeat
    background-size : 100% 100%
    margin : auto .25rem
.maskLayer
    position : fixed
    top : 0
    bottom : 0
    width : 100%
    z-index : 500
    background : rgba(0, 0, 0, 0.6)
.optionBox
    width : 80%
    height : 15rem
.bg-red
    background : #d41911
.option-bor
    width : 2rem
    height : 2rem
    line-height : 1rem
    border : 1px solid #d2d2d2
    border-radius : 100% 100%
.pad-box
    padding : .5rem 1%
</style>

